<script lang="ts" setup>
import type { BillApi } from '#/api/spa/bill';

import {
  message,
  Tabs,
  Form,
  Input,
  Textarea,
  Button,
  Select,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  DatePicker,
} from 'ant-design-vue';
import { computed, ref, h, onMounted, watch, nextTick } from 'vue';
import { $t } from '#/locales';

import type { VxeTableInstance } from '#/adapter/vxe-table';
import { Plus } from '@vben/icons';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { getBillItemsListByBillId } from '#/api/spa/bill';

const props = defineProps<{
  billId?: number; // 账单ID（主表的关联字段）
}>();

const list = ref<BillApi.BillItems[]>([]); // 列表的数据
const tableRef = ref<VxeTableInstance>();
/** 添加账单明细 */
const onAdd = async () => {
  await tableRef.value?.insertAt({} as BillApi.BillItems, -1);
};

/** 删除账单明细 */
const onDelete = async (row: BillApi.BillItems) => {
  await tableRef.value?.remove(row);
};

/** 提供获取表格数据的方法供父组件调用 */
defineExpose({
  getData: (): BillApi.BillItems[] => {
    const data = list.value as BillApi.BillItems[];
    const removeRecords =
      tableRef.value?.getRemoveRecords() as BillApi.BillItems[];
    const insertRecords =
      tableRef.value?.getInsertRecords() as BillApi.BillItems[];
    return data
      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
      ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
  },
});

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.billId,
  async (val) => {
    if (!val) {
      return;
    }
    list.value = await getBillItemsListByBillId(props.billId!);
  },
  { immediate: true },
);
</script>

<template>
  <vxe-table ref="tableRef" :data="list" show-overflow class="mx-4">
    <vxe-column field="consumptionRecordId" title="消费记录ID" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.consumptionRecordId" />
      </template>
    </vxe-column>
    <vxe-column field="serviceName" title="服务名称" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.serviceName" />
      </template>
    </vxe-column>
    <vxe-column field="quantity" title="数量" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.quantity" />
      </template>
    </vxe-column>
    <vxe-column field="unitPrice" title="单价" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.unitPrice" />
      </template>
    </vxe-column>
    <vxe-column field="totalAmount" title="总金额" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.totalAmount" />
      </template>
    </vxe-column>
    <vxe-column field="discountAmount" title="优惠金额" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.discountAmount" />
      </template>
    </vxe-column>
    <vxe-column field="actualAmount" title="实收金额" align="center">
      <template #default="{ row }">
        <Input v-model:value="row.actualAmount" />
      </template>
    </vxe-column>
    <vxe-column field="operation" title="操作" align="center">
      <template #default="{ row }">
        <Button
          size="small"
          type="link"
          danger
          @click="onDelete(row as any)"
          v-access:code="['spa:bill:delete']"
        >
          {{ $t('ui.actionTitle.delete') }}
        </Button>
      </template>
    </vxe-column>
  </vxe-table>
  <div class="mt-4 flex justify-center">
    <Button
      :icon="h(Plus)"
      type="primary"
      ghost
      @click="onAdd"
      v-access:code="['spa:bill:create']"
    >
      {{ $t('ui.actionTitle.create', ['账单明细']) }}
    </Button>
  </div>
</template>
